<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>攀枝花智慧旅游后台网站</title>
    <link rel="stylesheet" href="assets/css/mycss.css">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!--Begin core plugin -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/moment/moment.js"></script>
    <script  src="assets/js/jquery.slimscroll.js "></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/functions.js"></script>

    <script src="wangEditor/wangEditor.js"></script>
    <script src="assets/layer/layer.js"></script>

</head>

<body>
<div class="container">
<div class="page-header ">
    <h1 class="myInformationTitle">攀枝花智慧旅游 <small>信息输入系统</small></h1>
</div>

<div class="input-group input-group-lg myInputInformationDiv ">
    <span class="input-group-addon" id="sizing-addon1">美食名称</span>
    <input type="text" class="form-control" placeholder="请输入名称" aria-describedby="sizing-addon1" id="foodName">

</div>


<div class="input-group input-group-lg myInputInformationDiv ">
<span class="input-group-addon" id="sizing-addon2">美食简介</span>
<input type="text" class="form-control" placeholder="请输入简介" aria-describedby="sizing-addon1" id="foodContent">
</div>

<div class="btn-group btn-group-lg myInputInformationBtn" role="group" >

    <select class="btn btn-default" id="Classification"></select>

    <button type="button" class="btn btn-default" id="submitEditorBtn">提交</button>
    <button type="button" class="btn btn-default" id="clearEditorBtn">清空</button>
    <button type="button" class="btn btn-default" id="imgSizeBtn">图片大小</button>
</div>

<div id="editor">
    <p>开始输入你的内容吧！！</p>
</div>
    <!--End footer -->

</div>
<!--End main content -->
<!--提示照片的回显框-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close closeBtn" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">图片大小设定</h4>
            </div>
            <div class="modal-body">
                <form>
                    <table id="imagForeach">
<!--                        <tr>-->
<!--                            <th>图片展示</th>-->
<!--                            <th>最大宽度</th>-->
<!--                        </tr>-->
<!--                            <td><img src="http://192.168.153.250/group1/M00/00/00/wKiZ-l3eeXmAfYlnABi8EWbebEw416.jpg" alt="" width="100" height="50"></td>-->
<!--                            <td><input type="text" placeholder="请输入最大宽度"></td>-->
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default closeBtn" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="OkBtn">确认应用</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.showLinkImg = false
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.uploadFileName = 'photo'
    // 设置图片上传的最大大小为10m
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
    //设置最大图片篇数为5；
    editor.customConfig.uploadImgMaxLength = 5

    // editor.customConfig.uploadImgHooks = {
    //     customInsert: function (insertImg, result, editor) {
    //         var datas =result.data;//获取后台返回的url
    //         for (var i = 0 ; i < datas.length ; i++){
    //             insertImg(datas[i]);
    //             console.log(datas[i]);
    //         }
    //     }
    // };
    editor.create()


    $(function () {

        //默认调用生成分类信息的函数；
        generateClassificationInformation();

        $(".closeBtn").click(function () {
            // 删除子节点
            $("#imagForeach").children().remove();
            $("#myModal").modal("hide");
        })

        //改变图片尺寸的jquery代码；
        $("#OkBtn").click(function () {
           //获得模态框的数据；
           var inputWidth = $("#imagForeach input");
            var imgs = $("#editor img");
            // value为dom对象
            var array = new Array();
            $.each(inputWidth, function(index, value) {
                //把数字存入数组；
                var num = $(this).val();
                array[index] = num;
            });
            $.each(imgs,function (index,value) {
                var maxWidth = array[index];
                //使用正则进行匹配；
                var reg = /^[0-9]*$/;
                var s1 = reg.test(maxWidth);
                var s1 = !reg.test(maxWidth);
                if (!reg.test(maxWidth) || maxWidth.length > 3){
                    layer.msg("输入有误，请重新输入！！");
                    return;
                }
                if (maxWidth == ""){
                    // 类似于continue；
                    return true;
                }
                $(this).css("max-width",maxWidth+"%");
            });

            // 删除子节点
            $("#imagForeach").children().remove();
            $("#myModal").modal("hide");
        });


        $("#imgSizeBtn").click(function () {
            //准备数据，加入模态框；匹配editor后代元素中所有的img，wanguditor的z-index很大，必须要修改
            var imgs = $("#editor img");
            var htmlHead = "<tr><th>图片</th><th>最大宽度</th></tr>"
            $("#imagForeach").append(htmlHead);
            $.each(imgs, function(index, value) {
                var imagSrc = value.src;
                var cssValue = $(this).css('max-width');
                var htmlImagSrc = "<tr><td><img src= "+imagSrc+" alt='' width='100' height='50'></td><td><input type='text' placeholder='"+cssValue+"'></td><tr/>"
                $("#imagForeach").append(htmlImagSrc);
            });

            $("#myModal").modal("show");
        });

        //清空编辑器的信息；
        $("#clearEditorBtn").click(function () {
            editor.txt.clear();
        })

        //提交编译器器的信息；
        $("#submitEditorBtn").click(function () {
            var foodName = $("#foodName").val();
            if ("" == foodName){
                layer.msg("请输入美食名称！");
                return;
            }

            var foodContent = $("#foodContent").val();
            if (""==foodContent){
                layer.msg("请输入美食简介！");
                return;
            }
            var text = editor.txt.html();


            var selectOption = $("#Classification").select();
            var classifi = selectOption.val();

            // 使用异步的方式，进行数据的后台传入，加载进数据库,不能使用get方式进行提交，可能会出现提交失败的情况！！！
            // $.get("save/informationItem",{"itemName":informationName,"itemContent":text,"informationItemBriefIntroduction":informationBrief},function () {
            //
            // });

            $.ajax({
                "url":"save/foodItem",
                "type":"post",
                "data":{
                    "foodName":foodName,
                    "foodContent":text,
                    "foodItemBriefIntroduction":foodContent,
                    "categorizationInformationName":classifi
                },
                "contentType":"application/x-www-form-urlencoded",
                // 预期服务器返回的数据
                "dataType":"json",
                // 后台报错才走这条路
                "error":function(response){
                    layer.msg("服务器错误，请联系管理员！");
                    //清空资讯名称；这里需要对后台进行协调后书写；
                    return;
                },
                "success":function(response){
                    //显示提示消息；
                    var message = response.message;
                    layer.msg(message);
                    if ("FAILED" == response.result){
                        $("#foodName").val("");
                    }else{
                        //成功就三秒内关闭窗口；关闭窗口
                        setTimeout(function() {window.opener=null;window.close();}, 2000);
                    }
                }
            });
        });
    });

    function generateClassificationInformation() {
        $.ajax({
            "url":"get/all/food/classification",
            "type":"post",
            "error":function(response){
                layer.msg("服务器错误，请联系管理员！");
                //清空资讯名称；这里需要对后台进行协调后书写；
                return;
            },
            "success":function(response){
                //显示提示消息；
                var list = response.data;
                var i = 1;
               $.each(list,function (index, value) {
                   var html;
                   var id =  value.id;
                   var categorizationInformation = value.categorizationInformation;
                   if (i == 1){
                       html = "<option selected num = "+id+">"+categorizationInformation+"</option>";
                   }else {
                       html = "<option num = "+id+">"+categorizationInformation+"</option>";
                   }
                   $("#Classification").append(html);
               });
            }
        });
    }
</script>


</div>

</body>
</html>
